<template>
	<view>
		<view class="flex_sb h100 mb10 plr30 b-warning cf"
			v-if="mealList.length > 0 && type == 2 && depositInfo.deposit_status == 0">
			<text class="ft26">
				请先支付
				<text class="plr10 ft32">电池押金</text>
				后，再购买租电套餐
			</text>
			<view class="h50 lh50 plr24 bf warning border-r3" @click="confDeposit(3, getBalance, true)">立即支付</view>
		</view>
		<view class="p30">
			<view class="mb30 p24 border-r1 bf shadow" v-for="(item,index) in depositInfo" :key="index">
				<view class="flex h60" v-if="type == 2">
					<text class="flex1">当前账户余额：</text>
					<text class="plr20 primary" @click="routerLink({ path: '/pages/user/wallet/recharge' })">立即充值</text>
					<text class="pl20 warning">{{ item.balance || '0' }} 元</text>
				</view>
				<view class="flex h60">
					<text class="flex1">赠送金额：</text>
					<text class="pl20 pr10">{{ item.giveMoney || '0' }} 元</text>
				</view>
				<view class="flex h60">
					<text class="flex1">电池押金：</text>
					<text class="pl20 pr10">{{ item.deposit || '0' }} 元</text>
					<text class="plr10 primary" v-show="type == 2 && depositInfo.deposit_status == 1"
						@click="routerLink({ path: '/pages/user/wallet/index' })">点击查看</text>
				</view>
				<!-- <view class="lh40 ft26 c6">{{ info.remarks || '--' }}</view> -->
			</view>
			<view class="flex_a h100 mb30 plr24 border-r1 bf shadow">
				<text class="flex1">电池类型</text>
				<radio-group class="flex_a" @change="chooseEle">
					<block v-for="item in btTypeList" :key="item.status">
						<label class="flex_a mr24">
							<view>
								<!-- :disabled="type == 2 && depositInfo.type_name" -->
								<radio color="#3282FF" :value="item.status" :checked="btType == item.status" />
							</view>
							<text>{{ item.name }}</text>
						</label>
					</block>
				</radio-group>
			</view>
			<view class="p24 border-r1 bf shadow" style="min-height: calc(100vh - 580upx);">
				<view class="h60">租电套餐</view>
				<view class="mb50">
					<block v-for="item in mealList" :key="item.id">
						<view class="flex_a h80 mb20 ft26" @click="chooseMenu(item)">
							<view class="flex_aj w170 ph100 mr24 border-r1"
								:class="mealId == item.id ? 'bd-primary primary' : 'bd'">{{ item.days }}天</view>
							<view class="flex1 flex_aj ph100 border-r1"
								:class="mealId == item.id ? 'bd-primary primary' : 'bd'">
								换电次数：{{ item.num }}
								<text class="pl10">¥{{ item.price }}</text>
							</view>
						</view>
					</block>

					<view class="h100 c9 tac" v-if="mealList.length == 0">暂无{{ btType }}V电池相关的套餐</view>
				</view>
				<view class="" v-if="type == 2">
					<view class="plr30 mb30">
						<u-button type="primary" shape="circle" :disabled="depositInfo.deposit_status == 0"
							@click="confBuy">购买套餐</u-button>
					</view>
					<view class="flex_aj h60">
						<view class="flex_a" @click="checkboxChange">
							<view class="checkbox_item flex_aj" :class="isAgree ? 'checkbox_acti' : ''">
								<u-icon name="checkbox-mark" color="#fff" size="24"></u-icon>
							</view>
							<text class="pl10">我已阅读并同意</text>
						</view>
						<navigator url="/pages/user/rentEle/protocol" hover-class="none" class="primary">《租赁电池套餐协议》
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import payDeposit from '../mixins/payDeposit.js'
	import {
		mapState
	} from 'vuex'
	import {
		getDeviceMeal,
		getBalance,
		buyMeal
	} from '@/api/user.js'
	export default {
		name: 'rentElePackage',
		mixins: [payDeposit],
		data() {
			return {
				type: 1, // 1 查看租车套餐   2 购买租车套餐
				btType: 48, //电池类型 48、60、72 （固定这三种）
				btTypeList: [{
					name: '48V',
					status: 48
				}, {
					name: '60V',
					status: 60
				}, {
					name: '72V',
					status: 72
				}],
				info: {}, // 设备信息
				deviceId: '', // 设备编号
				mealId: '', // 选中的套餐id
				selectMeal: {}, // 选中的套餐
				isAgree: true,
				mealList: [], // 套餐列表
				depositInfo: {}, //押金信息
				agentId: '',
				moneyArr: [], //钱包信息


			}
		},
		computed: {

			...mapState({
				agentIdss: state => state.user.agentIdss,
			})


		},
		onLoad(e) {
			console.log("onLoad-e----", e)
			this.type = e.type || 2
			this.deviceId = e.deviceId || ''
			this.deviceNo = e.deviceNo || ''
			this.init()
			setTimeout(() => {
				console.log('123456789', this.moneyArr);
			}, 1000)
		},
		methods: {
			async init() {
				// if (this.type == 2) {
				await this.getBalance()
				// }
				this.getDeviceMeal()
			},
			// 选择电池类型
			chooseEle(e) {
				if (this.btType == e.detail.value) {
					return false
				}
				this.btType = e.detail.value
				this.getDeviceMeal()
			},
			// 获取租车套餐
			async getDeviceMeal() {
				const res = await getDeviceMeal({
					deviceId: this.deviceId,
					btType: this.btType
				})
				const _list = res.data.mealExchangeList
				this.info = res.data
				this.mealList = _list
				this.mealList.forEach((item) => {
					this.agentId = item.agentId
					console.log('+++++++', item.agentId);
				})
				console.log('++++++++++', this.mealList);
				if (this.type == 2 && _list[0]) {
					this.mealId = _list[0].id
					this.selectMeal = _list[0]
				}
			},
			// 获取钱包信息
			async getBalance() {
				const res = await getBalance({
					agentId: this.agentIdss
				})

				this.depositInfo = res.data
				// let data = res.data
				// data.forEach((item) =>
				// 	this.moneyArr.push(item)
				// )

				console.log("this.depositInfo----", this.moneyArr)

				this.btType = res.data.type_name || 48
			},
			// 购买套餐
			async confBuy() {
				if (!this.mealId) {
					return this.toast('请选择套餐')
				}
				if (parseFloat(this.depositInfo.balance) < parseFloat(this.selectMeal.price)) {
					return this.confirm({
						title: '可用余额不足',
						content: '您的余额不足，请先充值',
						confirmText: '去充值'
					}).then(res => {
						if (res.confirm) {
							this.routerLink({
								path: '/pages/user/wallet/recharge'
							})
						}
					})
				}
				if (!this.isAgree) {
					return this.toast('请勾选并同意《租赁电池套餐协议》')
				}
				console.log('+++++++++', this.deviceId, this.mealId);
				const res = await buyMeal({
					deviceId: this.deviceId,
					mealId: this.mealId,
					agentId: this.agentId
				})
				this.confirm({
					content: '购买成功',
					showCancel: false
				}).then(res => {
					this.back()
				})
			},

			// 选择套餐
			chooseMenu(e) {
				if (this.type == 1) {
					return false
				}
				this.selectMeal = e
				this.mealId = e.id
			},
			// 同意协议
			checkboxChange() {
				this.isAgree = !this.isAgree
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox_item {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.checkbox_acti {
		background-color: $primary;
		border: 1px solid $primary;
	}
</style>
